<template>

	<view style="display: flex;flex-direction: column;justify-content: center;height: calc(100vh - 44px);">
		<view class="title">
			欢迎回来
		</view>
		<view class="form_box">
			<uni-forms :modelValue="form" :rules="rules" ref="formRef">
				<uni-forms-item name="username">
					<uni-easyinput type="text" placeholder="请输入用户名" v-model="form.username" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="text" placeholder="请输入密码" v-model="form.password" />
				</uni-forms-item>
				<uni-forms-item name="repassword" v-if="!type">
					<uni-easyinput type="text" value="" placeholder="再次输入密码" v-model="form.repassword" />
				</uni-forms-item>
			</uni-forms>
			<MainBigButton @click="handleSubmit">{{type?'登录':'注册'}}</MainBigButton>
		</view>
		<view class="login_text">
			<view class="line"></view>
			<view class="text">社交账号登录</view>
			<view class="line"></view>
		</view>
		<view class="login_logo">
			<view class="logo_box">
				<text class="iconfont iconweixin"></text>
			</view>
			<view class="logo_box">
				<text class="iconfont iconQQ"></text>
			</view>
			<view class="logo_box">
				<text class="iconfont iconxinlangweibo"></text>
			</view>
		</view>
		<view style="text-align: center;color: #808080;font-size: 16px;" @click="handleSwitch">
			{{type?'注册':'登录'}}账号
		</view>
	</view>
</template>

<script>
	import MainBigButton from '@/components/common/main-big-button.vue'

	export default {
		components: {
			MainBigButton
		},
		data() {
			return {
				type: true,
				form: {
					username: '',
					password: '',
					repassword: '',
				},
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						}, {
							minLength: 6,
							maxLength: 20,
							errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符'
						}],
						validateTrigger: 'change'
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}, {
							minLength: 6,
							maxLength: 20,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
						}],
						validateTrigger: 'change'
					},
					repassword: {
						rules: [{
							required: true,
							errorMessage: '请输入确认密码',
						}, {
							minLength: 6,
							maxLength: 20,
							errorMessage: '确认密码长度在 {minLength} 到 {maxLength} 个字符'
						}],
						validateTrigger: 'change'
					},
				},


			};
		},
		methods: {
			handleSubmit() {
				this.$refs.formRef.validate().then(result => {
					let text = this.type ? 'login' : 'reg'
					let title = this.type ? '登录成功' : '注册成功'
					this.$H.post('/' + text, this.form).then(res => {
						uni.showToast({
							title
						})
						this.$store.dispatch('login', res)
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					})
				})
			},
			handleSwitch() {
				this.type = !this.type
				let title=this.type?'登录':'注册'
				uni.setNavigationBarTitle({
					title
				})
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'登录'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		color: #6c757d;
		font-size: 38rpx;
		text-align: center;
		margin-top: -40rpx;
		margin-bottom: 68rpx;
	}

	.form_box {
		margin-bottom: 50rpx;
		padding: 0 40rpx;
	}


	.login_text {
		margin-bottom: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.line {
			height: 2rpx;
			width: 100rpx;
			background-color: #edece9;
		}

		.text {
			font-size: 24rpx;
			color: #6c757d;
			margin: 0 20rpx;
		}
	}

	.login_logo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 100rpx;
		margin-bottom: 50rpx;

		.logo_box {
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;
			background-color: #f8f9fa;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>
